// LOLm 英雄联盟 首图 详情图 生成
import { getURLBase64Image, loadImages, drawImagesArea,drawBgBorder } from "./getUrlImg";

// 生成LOLm 英雄联盟首图
export async function makeTitleImgLOLm(data, list, attrs) {
  return new Promise(async (resolve, reject) => {
    // 取出已选择项
    let arr = [];
    let sm = "";
    let duanwei = "";
    list = list.split(",");
    if (!list || list == []) {
      reject("多选不能为空");
    }
    if (list && list.length) {
      attrs.forEach(async (item1) => {
        if (item1.aavName == "f4") {
          item1.childAttributes.forEach(async (item2) => {
            if (item2.id == data.f4) {
              sm = item2.fieldName;
            }
          });
        }
        if (item1.aavName == "f3") {
          item1.childAttributes.forEach(async (item2) => {
            if (item2.id == data.f3) {
              duanwei = item2.fieldName;
            }
          });
        }
        if (item1.fieldType == "checkbox" && item1.isEnable === "0") {
          item1.childAttributes.forEach(async (item2) => {
            if (list.indexOf(String(item2.id)) > -1 && item2.imgUrl) {
              arr.push(item2);
            }
          });
        }
      });
    }

    try {
      const mainBg = await getURLBase64Image(
        "https://imgage.maimaihao.com/makeImg/LOLm/LOLMmainImgBg.png"
      );
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      canvas.width = mainBg.width;
      canvas.height = mainBg.height;
      context.drawImage(mainBg, 0, 0, mainBg.width, mainBg.height);
      context.fillStyle = "#ffffff";
      // 头部标题 店铺名
      context.font = "bold 50px Adobe Ming Std";
      // 头部标题 店铺名
      context.fillText(
        `${data.gameName || "--"}`,
        2560 / 2 - (data.gameName.length * 48) / 2,
        70
      );
      // 左侧展示
      context.font = "bold 40px Adobe Ming Std";
      // 编号、区服、实名、段位
      context.fillText(`编号:${data.thirdId || "--"}`, 140, 385); //编号
      context.fillText(`区服:${data.systemName + data.carrierName || "--"}`, 140, 509);//区服
      context.fillText(`实名:${sm || "--"}`, 140, 631);//实名
      context.fillText(`段位:${duanwei || "--"}`, 140, 758);//
      //  加载皮肤图片
      context.font = "25px Adobe Ming Std";
      let skinImgs = [];
      if (arr && arr.length) {
        skinImgs = await loadImages(arr, 24);
      } else {
        // 没有Sren
      }
      // .sort(sortBy("sort"))
      // let instances = skinImgs.length ? skinImgs : [];
      if (skinImgs && skinImgs.length) {
        // 开始绘制
        let opts = {
          startX: 698,
          startY: 198,
          rowNum:8,
          stepY: 30,
          stepX: 45,
          txtLineHeight: 40,
          imgWidth1: 182,
          imgHeight: 272
        };
        
        drawImagesArea(context, skinImgs, opts);
        // 绘制结束
        const base64Url = canvas.toDataURL("image/jpeg", 0.8);
        resolve(base64Url);
      } else {
        const base64Url = canvas.toDataURL("image/jpeg", 0.8);
        resolve(base64Url);
      }
    } catch (error) {
      reject(error);
    }
  });
}

// // 生成详情图-LOLm 英雄联盟 多图
export async function makeDetailImgLOLm(data, skins, attrs) {
  return new Promise(async (resolve, reject) => {
    // 定义一个整体图片的数组
    let imgPageArr = [];
    let commonIndex = 0; //定义一个全局的皮肤数
    let imgNUm = -1; //图片页数  数量
    let typeArrNum = -1; //每页图的分组数量
    // 双重循环 遍历所有皮肤
    for (let i = 0; i < skins.length; i++) {
      // 遍历不同类型的皮肤
      const typeMap = skins[i];
      if (typeMap.list.length > 0) {
        for (let j = 0; j < typeMap.list.length; j++) {
          // 遍历到皮肤
          let skin = typeMap.list[j];
          // 本次遍历不绘制  只将每张图片的内容区分开
          if (commonIndex === 0) {
            typeArrNum = -1;
            imgPageArr = [[]];
            imgPageArr[0].push({
              typeName: typeMap.name,
              skins: [],
            });
            imgNUm++;
            typeArrNum++;
          }
          if (commonIndex % 70 == 0 && commonIndex != 0) {
            typeArrNum = -1;
            imgPageArr.push([]);
            imgPageArr[imgNUm + 1].push({
              typeName: typeMap.name,
              skins: [],
            });
            imgNUm++;
            typeArrNum++;
          } //每张图片展示70个皮肤

          if (j == 0 && commonIndex % 70 != 0) {
            // 分组开始  在分页中创建分组数组
            imgPageArr[imgNUm].push({
              typeName: typeMap.name,
              skins: [],
            });
            typeArrNum++;
          }
          if (skin.imgUrl) {
            imgPageArr[imgNUm][typeArrNum].skins.push(skin);
          } else {
            typeMap.list.splice(j, 1);
            j--;
            continue;
          }
          commonIndex++;
        }
      }
    }
 
    // 绘制图片
    let imgsArr = [];
    if (imgPageArr && imgPageArr.length) {
      for (let k = 0; k < imgPageArr.length; k++) {
        let base64Img = await makeDetailImgWwqyOne(imgPageArr[k], data);
        imgsArr.push(JSON.stringify(base64Img));
        if (k == imgPageArr.length - 1) {
          resolve(imgsArr);
        }
      }
    }
  });
}
// 绘制一个 LOLm 英雄联盟 详情图
async function makeDetailImgWwqyOne(typeArr, data) {
  ////console.log("%c Line:203 🍌 typeArr", "color:#93c0a4", typeArr);
  // 先计算当前页图片的高度
  let lineHeight = 273;
  let skinHeight = 0;
  let lineNum = 0;
  let skinNum = 0;
  if (typeArr && typeArr.length) {
    for (let i = 0; i < typeArr.length; i++) {
      let typeMap = typeArr[i];
      lineNum = lineNum + Math.ceil(typeMap.skins.length / 7);
      for (let j = 0; j < typeArr[i].skins.length; j++) {
        let url = typeArr[i].skins[j].imgUrl;
        if (url) {
          try {
            skinNum++;
            const temp = await getURLBase64Image(url);
            typeArr[i].skins[j].image = temp;
          } catch (error) {}
        } else {
          typeArr[i].skins.splice(j, 1);
          j--;
        }
      }
    }
  }
  skinHeight = Math.ceil(lineNum * lineHeight) + typeArr.length * 60 + 100 + 80; //所有皮肤 包括分类标题的高度  页尾距离
  //console.log("%c Line:217 🍪 skinHeight", "color:#fca650", skinHeight);

  // 开始创建画布
  let y = 140; //图的绘制时距离上端的距离
  let x = 47; //绘制皮肤时的x距离
  // 创建canvas实例
  const canvas = document.createElement("canvas");
  canvas.style.background = "#ffffff";
  const context = canvas.getContext("2d");
  canvas.width = 1500;
  canvas.height = Math.ceil(skinHeight);
  context.font = "40px Adobe Ming Std";
  // 下载分类名称背景
  let typeNameBg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/LOLm/lolm-subtitle-bg.png"
  );
   // 下载主背景
  let mainBgImg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/LOLm/lolm-bg.png"
  );
  // 下载头部背景
  let titleBg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/LOLm/lolm-title-bg.png"
  );
  // 下载右上角装饰 
  let hpjyrg = await getURLBase64Image(
    "https://imgage.maimaihao.com/makeImg/heping/hpjyrg.png"
  );
  // 开始绘制
 
  // 绘制背景图
  context.drawImage(mainBgImg, 0, 0, canvas.width, canvas.height);
  // 绘制标题背景
  context.drawImage(titleBg, 0, 0, canvas.width, 88);
  // 填充标题文字
  context.font = "bold 30px Adobe Ming Std";
  context.fillStyle = "#fff"; // 文字填充颜色
  // 头部标题 店铺名
  context.fillText(
    `${data.gameName || "--"}`,
    canvas.width / 2 - (data.gameName.length * 30) / 2,
    45
  );

  // 绘制主要区域的背景
  drawBgBorder(context, 30, 130, canvas.width - 60, skinHeight - 150, {
    radius: 12,
    borderWidth: 2,
    startColor: "rgba(54, 58, 98, 0.6)",
    endColor: "rgba(37, 44, 75, 0.6)",
    borderColor: "#FFD7A1",
  });
  // 绘制右上角装饰 hpjyrg
  context.drawImage(hpjyrg, 1482, 130, 5, 68);

  //
  // 开始绘制皮肤
  if (typeArr && typeArr.length) {
    for (let i = 0; i < typeArr.length; i++) {
      let typeMap = typeArr[i];
      for (let j = 0; j < typeMap.skins.length; j++) {
        let skin = typeMap.skins[j];
        if (j == 0) {
          // 分组开始  先绘制分类标题图片和分类名
          if (i != 0) {
            y += lineHeight;
          }
          context.drawImage(typeNameBg, 0, y - 100, 337, 229);
          context.font = "28px Adobe Ming Std";
          context.fillStyle = "#ffffff"; // 文字填充颜色
          let name = typeMap.typeName || "其他";
          // let txtWidth = name.length * 28;
          context.fillText(` ${name}`, 60, y + 25);
          y += 60;
          x = 47;
        }
        if (j % 8 == 0 && j != 0) {
          x = 47;
          y += lineHeight;
        }
        // 绘制每张图中的皮肤
        if (skin.image) {
          // 绘制皮肤图片
          context.drawImage(skin.image, x , y , 150, 223);
          // 皮肤名称
          context.font = "20px Adobe Ming Std";
          context.fillText(
            ` ${skin.fieldName ? skin.fieldName : "未知"}`,
            x,
            y + 253
          );
          x += 179;
        }
      }
    }
  }
  return canvas.toDataURL("image/jpeg", 0.8);
}
